﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>颜色选择器演示</title>
<style type="text/css">
#bar{
	width:225px;
	height:20px;
	line-height:20px;
	background:#000;
	color:#fff;
	size:12px;
}
.seek{
  position:relative;
  width: 225px;
  height: 15px;
  margin-top:30px;
  background:url(data/img/seek_sldr_bkg_comp.gif) no-repeat;
}
.seekthumb{
	position: absolute;
	left:0;
	top:0;
	height: 15px;
	width: 15px;
	background:url(data/img/seek_thumb_up.gif) no-repeat scroll 0 0 transparent;
}
.msg{
	position:absolute;
	background:#fff;
	width:30px;
	text-align:center;
	line-height:1;
	right:0;
}
</style>
<script type="text/javascript" src="1st.js"></script>
</head>
<body>
<div id="bar">#000000</div>

<div class="seek" title="红色值">
    <div id="R" class="seekthumb"></div>
	<div class="msg">22</div>
</div>

<div class="seek" title="绿色值">
    <div id="G" class="seekthumb"></div>
	<div class="msg">22</div>	
</div>

<div class="seek" title="蓝色值">
    <div id="B" class="seekthumb"></div>
	<div class="msg">22</div>	
</div>

<script type="text/javascript">
var o = {R:0, G:0, B:0};
var bar = F("bar");
var show = function(dg){
	var per = Math.floor(dg.box.left()/180*255);
	dg.box.next().html(per);
	o[dg.box.node.id] = per;
	
	var rgb = F.rgb2hex(o.R,o.G,o.B);
	bar.html(rgb).bg(rgb);
};

F("R").drag({lockY:1, x1:0, x2:195, running:show});
F("G").drag({lockY:1, x1:0, x2:195, running:show});
F("B").drag({lockY:1, x1:0, x2:195, running:show});
</script>
</body>
</html>